<template>
	<view class="bg">
		<view class="top">
			<checkbox-group @change="selectAllChange" name="limitarea" >
				<label>
					<checkbox value="1" :checked="selectAll" style="transform:scale(0.7)"/>
					<text style="font-size: 28upx;color: #FFFFFF;">全选</text>
				</label>
			</checkbox-group>
			<view class="btn-add" @click="openPopup"><i class="ali-icon" style="color: #408CFF;">&#xe63d;</i>填写换卡地址</view>
		</view>
		<view class="body">
			<checkbox-group @change="checkboxChange" name="limitarea"  >
				<label :class="['line',index%2==0?'even':'']" v-for="(item,index) in cardList">
					<checkbox :value="item.value" :checked="item.checked" style="transform:scale(0.7)"/>
					<text>{{ item.label }}</text>
				</label>
			</checkbox-group>
		</view>
		<!-- 修改换卡地址 -->
		<view class="div-dialog" v-if="showPopup">
			<view class="div-dialog-body">
				<view class="div-dialog-body-title">
					<text>填写地址</text>
					<text><i class="iconfont icon-shanchu close" @click="closePopup">关闭</i></text>
				</view>
				<view class="div-dialog-body-table">
					<view class="label">收件人：</view>
					<view class="value" :style="{'border-bottom':nameSelect?'1px solid #408CFF':'1px solid #e6e6e6'}">
						<input v-model="info.name" class="uni-input" placeholder-style="color:#999999" placeholder="请输入收件人姓名" @input='inputName' :disabled="disabled" @focus="focusName"/>
					</view>
					<view class="label">手机号：</view>
					<view class="value" :style="{'border-bottom':phoneSelect?'1px solid #408CFF':'1px solid #e6e6e6'}">
						<input v-model="info.phone" class="uni-input" placeholder-style="color:#999999" placeholder="请输入收件人手机号" @input='inputPhone' :disabled="disabled" @focus="focusPhone"/>
					</view>
					<view class="label">区域：</view>
					<view class="value" :style="{'border-bottom':areaSelect?'1px solid #408CFF':'1px solid #e6e6e6'}">
						<div class="input-style uni-input sheng-shi-qu" @click="$refs.simpleAddress.open()">
							{{info.area}}
						</div>
					</view>
					<view class="label">详细地址：</view>
					<view class="value" :style="{'border-bottom':addrSelect?'1px solid #408CFF':'1px solid #e6e6e6'}">
						<input v-model="info.address" class="uni-input" placeholder-style="color:#999999" placeholder="请输入详细地址" @input='inputAddr' :disabled="disabled" @focus="focusAddr"/>
					</view>
				</view>
				<view class="btn-line">
					<button class="btn" :loading="disabled" @click="saveNewAddr">保存</button>
				</view>
				<img src='../../static/img/map.svg' class="img-bg" />
			</view>
		</view>
		<simple-address ref="simpleAddress" @onConfirm="onConfirm" themeColor='#007AFF'></simple-address>
	</view>
</template>

<script>
	import simpleAddress from '@/components/simple-address/simple-address.nvue';
	
	export default {
		components: {
			simpleAddress
		},
		data() {
			return {
				defaultCardId: '',		//卡列表传递的卡id
				defaultCardNumber: '',	//卡列表传递的卡号
				selectAll: false,		//是否全选
				cardList: [],			//全部待换卡
				ids: [],				//选中的换卡列表 卡id
				info: {
					address: '',
					area: '省/市/区',
					name: '',
					phone: '',
				},
				showPopup: false,
				disabled: false,
				nameSelect: false,
				areaSelect: false,
				addrSelect: false,
				phoneSelect: false,
				phoneSelect: false,
				pagekey: '',
			}
		},
		onLoad(option){
			if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
		　　		WeixinJSBridge.invoke('setFontSizeCallback', {
			　　		'fontSize': 0
			　　});
			　　// 重写设置网页字体大小的事件
			　　WeixinJSBridge.on('menu:setfont', function () {
			　　　　WeixinJSBridge.invoke('setFontSizeCallback', {
			　　　　　　'fontSize': 0
			　　　　});
			　　});
			　
			};
			this.defaultCardNumber = option.cardNumber;
			this.defaultCardId = option.cardId;
			this.ids.push(option.cardId);
			this.initData()
		},
		onShow(){
		
		},
		methods: {
			initData(){
				this.items = []
				this.$req.userData("card/getChangeCardFlagList",{
					
				}).then(v=>{
					this.ids = [];
					v.data.forEach(a=>{
						let obj = {}
						obj.value = a.id
						obj.label = a.cardNumber
						obj.checked = false;
						if(obj.value==this.defaultCardId){
							obj.checked = true;
							this.ids.push(obj.value)
						}
						this.cardList.push(obj)
						
					})
				})
			
			},
			selectAllChange(event){
				if(event.detail.value&&event.detail.value[0]=='1'){
					this.selectAll = true;
				}
				else{
					this.selectAll = false;
				}
				
				if(this.selectAll){
					for(let item of this.cardList){
						item.checked = true;
						this.ids.push(item.value);
					}
				}
				else{
					for(let item of this.cardList){
						item.checked = false;
					}
				}
				
			},
			checkboxChange(e){
				var items = this.cardList,
					values = e.detail.value;
					this.ids = e.detail.value
				this.cardList.map((item,i)=>{
					if(this.ids.includes(item.value)){
						this.$set(item,'checked',true)
					}
					else{
						this.$set(item,'checked',false)
					}
				})
				
				if(this.ids.length==this.cardList.length&&this.ids.length>0){
					this.selectAll = true;
				}
				else{
					this.selectAll = false;
				}
				
			},
			async openPopup(){
				if(this.ids.length==0){
					uni.showToast({
						title: "请至少选择一张卡号",
						icon: "none",
					})
					return false
				}
				this.showPopup = true;
				this.pagekey = await this.$getPageKey();
			},
			closePopup(){
				this.info = {
					address: '',
					phone: '',
					area: '省/市/区',
					name: '',
				}
				this.showPopup = false;
				this.disabled = false;
			},
			async saveNewAddr(){
				if(this.info.name==""||this.info.name.length>5){
					uni.showToast({
						icon: "none",
						title: "请输入正确的收件人！",
						duration: 3000
					});
					return 
				}
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.info.phone))){
					uni.showToast({
						icon: "none",
						title: "请输入正确的手机号！",
						duration: 3000
					});
					return 
				}
					
				if(this.info.area=="省/市/区"){
					uni.showToast({
						icon: "none",
						title: "请选择省市区！",
						duration: 3000
					});
					return 
				}
							
				if(this.info.address==""||this.info.address.length>30){
					uni.showToast({
						icon: "none",
						title: "请输入正确的详细地址！(30位以内)",
						duration: 3000
					});
					return 
				}
				this.disabled = true;
				let addr = this.info.area + this.info.address;
				//查询运费金额 如果大于0直接跳转 card/getChangeCardPrice       user-data -system   获取邮费
				let res = await this.$req.userData('card/getChangeCardPrice',{ids:this.ids});
				if(res._result){
					let idsStr = this.ids.join(',');
					if(res._result){
						uni.navigateTo({
							url: '/pages/other/payment/payment?ids='+idsStr+'&address='+addr+'&phoneNumber='+this.info.phone+'&receiveName='+this.info.name+'&price='+res.data+'&type=post'
						})
					}
				}
			},
			inputName(e){
				this.info.name = e.detail.value;
				this.nameSelect = true;
				this.addrSelect = false;
				this.areaSelect = false;
				this.phoneSelect = false;
			},
			inputAddr(e){
				this.info.address = e.detail.value;
				this.nameSelect = false;
				this.addrSelect = true;
				this.areaSelect = false;
				this.phoneSelect = false;
			},
			inputPhone(e){
				this.info.phoen = e.detail.value;
				this.nameSelect = false;
				this.addrSelect = false;
				this.areaSelect = false;
				this.phoneSelect = true;
			},
			focusName(){
				this.nameSelect = true;
				this.addrSelect = false;
				this.areaSelect = false;
				this.phoneSelect = false;
			},
			focusAddr(){
				this.nameSelect = false;
				this.addrSelect = true;
				this.areaSelect = false;
				this.phoneSelect = false;
			},
			focusPhone(){
				this.nameSelect = false;
				this.addrSelect = false;
				this.areaSelect = false;
				this.phoneSelect = true;
			},
			onConfirm(e) {
				this.info.area= e.label;
			},
		}
	}
</script>

<style>
	.bg{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-image: linear-gradient(to top, #fdfbfb 0%, white 100%);
	}
	.top{
		width: 90%;
		height: 100upx;
		position: fixed;
		top: 0;
		left: 0;
		padding: 0 5%;
		background-color: white;
		z-index: 10;
		border-bottom: 1px solid #E6E6E6;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-image: linear-gradient(120deg, #A0C6FF 0%, #408CFF 100%);
	}
	.btn-add{
		width: auto;
		height: 60upx;
		position: relative;
		padding: 0 24upx;
		background-image: linear-gradient(to top, #fdfbfb 0%, white 100%);
		color: #408CFF;
		font-size: 28upx;
		border-radius: 4px;
		display: flex;
		align-items: center;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}
	.body{
		width: 100%;
		height: calc(100% - 100upx);
		position: absolute;
		top: 102upx;
		left: 0;
		display: flex;
		flex-direction: column;
		overflow-y: scroll;
	}
	.line{
		width: 90%;
		height: 80upx;
		position: relative;
		top: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 5%;
		font-size: 28upx;
		color: #333333;
	}
	.even{
		/* background-image: linear-gradient(120deg, #F2F2F2 0%, #eeeeee 100%), radial-gradient(88% 271%, rgba(255, 255, 255, 0.25) 0%, rgba(254, 254, 254, 0.25) 1%, rgba(0, 0, 0, 0.25) 100%), radial-gradient(50% 100%, rgba(255, 255, 255, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%);
		background-blend-mode: normal, lighten, soft-light; */
		background: #EEF5FF;
	}
	/* 修改地址 */
	.div-dialog{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0,0,0,0.7);
		z-index: 15;
	}
	.div-dialog-body{
		width: 100%;
		height: auto;
		position: absolute;
		bottom: 0;
		left: 0;
		background-image: linear-gradient(45deg, #FFFFFF 0%, #ECF1FF 100%);
		z-index: 7;
		border-radius: 4px 4px 0 0;
	}
	.div-dialog-body-title{
		width: 94%;
		height: 70upx;
		position: relative;
		top: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28upx;
		color: #78A8F2;
		padding: 10upx 3%;
	}
	.div-dialog-body-table{
		width: 82%;
		height: auto;
		position: relative;
		padding-bottom: 20upx;
		display: flex;
		flex-direction: column;
		overflow-y: scroll;
		align-items: center;
		justify-content: flex-start;
		margin: 1% 5%;
		z-index: 6;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		border-radius: 4px;
		padding: 0 4% 20upx 4%;
	}
	.label{
		width: 100%;
		height: 50upx;
		position: relative;
		line-height: 50upx;
		font-size: 28upx;
		color: #333333;
		margin-top: 10px;
	}
	.value{
		width: 100%;
		height: 80upx;
		position: relative;
		border-bottom: 1px solid #e6e6e6;
		text-align: right;
	}
	.uni-input {
	    height: 50upx;
	    line-height: 25px;
	    font-size: 30upx;
	    background: rgba(255,255,255,0);
	    -webkit-box-flex: 1;
	    -webkit-flex: 1;
	    flex: 1;
	}
	.btn-line{
		width: 90%;
		height: 70upx;
		position: relative;
		margin: 20px 5%;
	}
	.btn{
		width: 100%;
		height: 80upx;
		text-align: center;
		line-height: 80upx;
		font-size: 30upx;
		color: #FFFFFF;
		background-image: linear-gradient(120deg, #A0C6FF 0%, #408CFF 100%);
		letter-spacing: 5px;
	}
	.close{
		color: #999;
		font-size: 28upx;
	}
	.img-bg{
		width: 35%;
		height: auto;
		position: absolute;
		top: 45%;
		right: 15%;
		opacity: 0.5;
		z-index: 1;
	}
</style>
